<template>
	<!-- 歌单列表的每一项 -->
	<div class="item" v-if="Object.keys(songlistitem).length !== 0" @click="listItemClick">
		<!--歌单图片 -->
		<div class="item-img" @mouseenter="showIcon" @mouseleave="closeIcon">
			<!-- 图片上的播放图标 鼠标经过时显示 -->
			<transition name="el-fade-in-linear">
				<div class="mask-playicon" v-show="isShowPlay">
					<span class="iconfont icon-play"></span>
				</div>
			</transition>
			<!-- 图片上方遮罩层1 显示歌单播放量 -->
                <div class="mask1" v-show="isShowIcon" v-if="songlistitem.playCount">
                  <span class="iconfont icon-yinle"></span>
                  <span>{{ formattedPlayCount }}</span>
                </div>
			<!-- 图片本身 使用懒加载 -->
			<img v-lazy="showImg" alt="" />
		</div>
		<!-- 歌单下的文字描述 -->
		<div class="item-text">
			<div>{{ songlistitem.name }}</div>
		</div>
	</div>
</template>
  
  <script setup>
  import { ref } from 'vue';
  import { computed } from 'vue';
  import { useRouter } from 'vue-router';
  import{formatNum} from '@/common/formatNum';
   const router = useRouter();
  const props = defineProps({
	songlistitem: {
	  type: Object,
	  default: () => ({}),
	},
  });
  
  const isShowIcon = ref(true);//播放量
  const isShowPlay = ref(false);//播放图标

  const formattedPlayCount = computed(() => {
      return formatNum(props.songlistitem.playCount); 
    });
  
  const showImg = computed(() => props.songlistitem.picUrl || props.songlistitem.coverImgUrl);
  
  const showIcon = () => {//显示图标
	isShowIcon.value = true;
	isShowPlay.value = true;
  };
  
  const closeIcon = () => {//关闭图标
	isShowIcon.value = true;
	isShowPlay.value = false;
  };
  
  const listItemClick = () => {  //点击歌单
	if (props.songlistitem.id) {
	  router.push(`/songlistdetail/${props.songlistitem.id}`); //路由到歌单详情
	  isShowPlay.value = false;
	  isShowIcon.value = true;
	}
  };
  </script>
  
  <style lang="less" scoped>
.item {
	width: 100%;
	height: 100%;
	cursor: pointer;
	margin-bottom: 15px;
	border-radius: 18px;
    overflow: hidden; /* 防止内容溢出 */
	.item-img {
		position: relative;
		border-radius: 18px;
		overflow: hidden; /* 防止内容溢出 */
		img {
			width: 100%;
			border-radius: 18px;
			
		}
		.mask1 {
			position: absolute;
			top: 0;
			width: 100%;
			height: 30px;
			line-height: 30px;
			text-align: right;
			color: #fff;
			font-size: 13px;
			padding-right: 7px;
			span {
				padding-left: 5px;
			}
		}
		.mask2 {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 30px;
			line-height: 30px;
			text-align: left;
			color: #fff;
			font-size: 13px;
			padding-left: 7px;
			span {
				padding-right: 5px;
			}
		}
	}
	.item-text {
		margin: 5px 0;
	}
}
</style>
